<template>
	<view class="ui-all">
		<view class="ui-list">
			<text>姓名</text>
			<input v-model="registerForm.username" maxlength="11" type="text" placeholder="请输入姓名" class="input">
		</view>
		<view class="ui-list">
			<text>密码</text>
			<input v-model="registerForm.password" type="text" :password="isHidePassword?true:false" placeholder="请输入密码"
				maxlength="20" class="input" />
			<image @click="isHidePasswordClick" class="eye"
				:src="isHidePassword?'/static/images/attention.png':'/static/images/attention_forbid.png'"></image>
		</view>
		<view class="ui-list">
			<text>确认密码</text>
			<input v-model="registerForm.confirmPassword" type="text" :password="isHideConfirmPassword?true:false"
				placeholder="确认密码" maxlength="20" class="input" />
			<image @click="isHideConfirmPasswordClick" class="eye"
				:src="isHideConfirmPassword?'/static/images/attention.png':'/static/images/attention_forbid.png'">
			</image>
		</view>
		<view class="ui-list">
			<text>验证码</text>
			<input v-model="registerForm.code" type="number" placeholder="请输入验证码" maxlength="20" class="input" />
			<image class="codeImg" :src="codeUrl" @click="getCode"></image>
		</view>
		<button type="primary" @click="submit">注册</button>
	</view>
</template>
<script>
	let timer = '';
	import {
		getCodeImg,
		register
	} from '@/api/login'
	import config from '@/config'
	import { toast, showConfirm } from "@/utils/common"
	export default {
		data() {
			return {
				sex: "请选择",
				yhimageValue: [],
				registerForm: {
					'username': "",
					'sex': "",
					'password': "",
					'confirmPassword': "",
					'avatar': "",
					'code': '',
					'uuid': ''
				},
				xingbiearray: ['男', '女'],
				index: 0,
				isHidePassword: true,
				isHideConfirmPassword: true,
				codeUrl: "",
				captchaEnabled: true,
			};
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.data.img
						this.registerForm.uuid = res.data.uuid
					}
				})
			},
			isHidePasswordClick() {
				this.isHidePassword = !this.isHidePassword
			},
			isHideConfirmPasswordClick() {
				this.isHideConfirmPassword = !this.isHideConfirmPassword
			},
			submit() {
				if (!this.registerForm.username) {
					toast("请输入姓名")
					return;
				};

				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					toast("两次输入的密码不一致")
					return;
				};
				register(this.registerForm).then(res => {
					const username = this.registerForm.username;
					showConfirm("恭喜你，您的账号 " + username + " 注册成功！").then(res => {
					  if (res.confirm) {
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login'
							})
						}, 800);
					  }
					})
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode();
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.eye {
		position: absolute;
		height: 50rpx;
		width: 50rpx;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.zhuce {
		width: 200rpx;
		color: white;
		height: 75rpx;
		font-size: 30rpx;
		background-color: #69c8fa;
		position: absolute;
		bottom: 40rpx;
		right: 50%;
		transform: translate(50%);
	}

	.codeImg {
		height: 64rpx;
		position: absolute;
		right: 0;
		top: 10rpx;
		width: 200rpx;
	}
</style>